<template>
    <div v-if="loading === false && item.content" style="width: 100%;padding: 8px 16px;">
        <div v-if="item.type < 2" style="width: 100%;height: 26px;display: flex;align-items: center;gap: 8px;">
            <img v-if="item.type === 0" style="width: 24px;height: 24px;" src="../assets/icon_ruru_head.png" alt="">
            <img v-if="item.type === 1" style="width: 24px;height: 24px;" src="../assets/icon_user_head.png" alt="">
            <span style="font-size: 14px;font-weight: bold;">{{ item.username }}</span>
        </div>
        <div v-if="item.type < 2"
            style="width: 100%;word-break: break-all;white-space: wrap;margin-top: 3px;font-size: 13px;padding-left: 32px;color: dimgray;user-select: text;white-space: pre-wrap;">
            <!-- {{ displayContent }} -->
            <char v-for="item in props.item.content" :anm="props.item.animation" :data="item" ></char>
        </div>
        <div v-if="item.type === 2"
            style="width: 100%;text-align: center;font-size: 12px;color: dimgray;padding: 8px 0;">
            {{ displayContent }}
        </div>
        <div v-if="item.type === 0 && isTestMode && item.verbose && animationEnd"
            style="width: 100%;padding: 0px;border: 1px solid rgb(0,120,215);border-radius: 3px;font-size: 12px;">
            <div style="width: 100%;line-height: 16px;background-color: rgb(0,120,215);color: white;padding-left: 8px;">
                调试信息
            </div>
            <div style="padding: 2px 4px;font-family: 'Courier New', Courier, monospace;line-height: 1.2;">
                <div style="width: 100%;font-family: sans-serif;line-height: 1.5;">
                    Total Latency:
                </div>
                <div style="width: 100%;">
                    {{ item.verbose.totalLatency }}
                </div>
                <div style="width: 100%;font-family: sans-serif;line-height: 1.5;">
                    Latency Per Token:
                </div>
                <div style="width: 100%;">
                    {{ item.verbose.latencyPerToken }} 毫秒
                </div>
                <div style="width: 100%;font-family: sans-serif;line-height: 1.5;">
                    Token Per Second:
                </div>
                <div style="width: 100%;">
                    {{ item.verbose.tokenPerSecond }} 个
                </div>
                <div style="width: 100%;font-family: sans-serif;line-height: 1.5;">
                    Input Token Ids({{ item.verbose.tokenIds.input.length }}):
                </div>
                <div style="width: 100%;white-space: wrap;overflow: hidden;">
                    <span
                        style="word-break: keep-all;margin-right: 6px;text-decoration: underline;display: inline-block;"
                        v-for="subItem in item.verbose.tokenIds.input">{{ subItem }}</span>
                </div>
                <div style="width: 100%;font-family: sans-serif;line-height: 1.5;">
                    Output Token Ids({{ item.verbose.tokenIds.output.length }}):
                </div>
                <div style="width: 100%;white-space: wrap;overflow: hidden;">
                    <span
                        style="word-break: keep-all;margin-right: 6px;text-decoration: underline;display: inline-block;"
                        v-for="subItem in item.verbose.tokenIds.output">{{ subItem }}</span>
                </div>
            </div>
        </div>
    </div>
    <div v-if="loading" style="width: 100%;padding: 8px 16px;">
        <div style="width: 100%;height: 26px;display: flex;align-items: center;gap: 8px;">
            <img style="width: 24px;height: 24px;" src="../assets/icon_ruru_head.png" alt="">
            <span style="font-size: 14px;font-weight: bold;">圆如</span>
        </div>
        <div
            style="width: 100%;word-break: break-all;white-space: wrap;margin-top: 3px;font-size: 13px;padding-left: 32px;color: dimgray;user-select: text;white-space: pre-wrap;">
            正在思考...
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount, nextTick, defineEmits } from 'vue';
import tool from '../tool';
import char from './char.vue'

const props = defineProps({
    item: {
        type: Object,
        default: {}
    },
    loading: {
        type: Boolean,
        default: false
    }
})

const isTestMode = ref(tool.store.getItem('testMode'))
tool.store.onChange('testMode', (e) => {
    isTestMode.value = e
    console.log(isTestMode.value)
    console.log(123)
})

const emits = defineEmits(['finished'])

const animationEnd = ref(false)

// watch(() => props.item.content, () => displayAnimation(), { deep: true })

const displayContent = ref('')

let timer = null

const displayAnimation = () => {
    displayContent.value = ''
    clearInterval(timer)
    if (props.item.animation && false) {
        timer = setInterval(async () => {
            let current = displayContent.value
            let to = props.item.content
            if (current === to) {
                clearInterval(timer)
                tool.store.setItem('sending', false)
                emits('finished')
                animationEnd.value = true
                return
            }
            to = to.slice(current.length)
            to = to.slice(0, 1)
            displayContent.value += to
            await nextTick()
            tool.scrollToBottom('chatMsg')
        }, 5);
    } else {
        displayContent.value = props.item.content
        tool.scrollToBottom('chatMsg')
        animationEnd.value = true
    }
}

onMounted(async () => {
    tool.store.onChange('stop', () => {
        clearInterval(timer)
        tool.store.setItem('sending', false)
    })
    displayAnimation()
})
</script>

<style scoped></style>